import React from 'react'
import { useState, useEffect } from 'react'
import './index.scss'
import { Table, Space, Button, Drawer } from 'antd'
import type { ColumnsType, TablePaginationConfig } from 'antd/es/table';
import type { FilterValue } from 'antd/es/table/interface';


import SearchForm from '@/components/Form/SearchForm';
import TableList from '@/components/TableList/TableList';

import { searchList, buttonList } from "./option"

interface DataType {
    key: React.Key;
    username: string,
    phone: string,
    gender: string,
    income: number,
    expense: number,
    rest: number,
    type: string
}

interface TableParams {
    pagination?: TablePaginationConfig;
    sortField?: string;
    sortOrder?: string;
    filters?: Record<string, FilterValue | null>;
}

const Plan: React.FC = () => {
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key'
        },
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
        }, {
            title: '性别',
            dataIndex: 'gender',
            key: 'gender'
        },
        {
            title: '分类',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '收入',
            dataIndex: 'income',
            key: 'income',
        },
        {
            title: '支出',
            dataIndex: 'expense',
            key: 'expense',
        },
        {
            title: '余额',
            dataIndex: 'rest',
            key: 'rest',
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <a onClick={detail}>查看</a>
                </Space>
            ),
        },
    ];
    const type = {
        '1': "收入",
        '2': '支出',
    }

    const gender = {
        '0': '女',
        '1': '男'
    }
    const initData: DataType[] = [
        {
            key: '1',
            username: 'xff',
            phone: '13245214641',
            type: type['1'],
            gender: gender['0'],
            income: 100,
            expense: 0,
            rest: 0,
        },
        {
            key: '1',
            username: 'admin',
            phone: '13245214641',
            type: type['2'],
            gender: gender['1'],
            income: 0,
            expense: 100,
            rest: 100,
        },

    ];

    // 列表数据
    const [data, setData] = useState<DataType[]>();
    // 打开详情页
    const [open, setOpen] = useState(false);
    // 分页信息
    const [tableParams, setTableParams] = useState<TableParams>({
        pagination: {
            current: 1,
            pageSize: 10,
        },
    });


    // 获取列表数据
    const getData = () => {
        setData(initData)
    }
    // 点击筛选
    const onQuery = (values: any) => {
        console.log('Success:', values);
    };
    // 新增
    const onAdd = () => {
        console.log("新增")
    }
    // 导出
    const onExport = () => {
        console.log("导出成功")
    }
    // 监听表格数据变化
    const tableChange = () => {
        setData([]);
    };
    // 列表详情
    const detail = () => {
    }

    // 副作用
    useEffect(() => {
        // 在这里请求数据
        getData();
    }, [JSON.stringify(tableParams)]);

    return (
        <div>
            {/* 搜素栏 */}
            <SearchForm searchList={searchList} buttonList={buttonList} onQuery={onQuery}>
                <Button type="primary" htmlType="button" onClick={onAdd} style={{ marginLeft: 20 }}>
                    新增
                </Button>
                <Button htmlType="button" onClick={onExport} style={{ marginLeft: 20 }}>
                    导出
                </Button>
            </SearchForm>

            {/* 数据列表 */}
            <TableList columns={columns} initData={data} tableChange={tableChange}></TableList>
        </div>
    )
}


export default Plan